<template>
  <div>
    <el-table :data="posts" style="width: 100%">
      <el-table-column prop="postId" label="ID" width="180"></el-table-column>
      <el-table-column prop="postAccount" label="发布账号" width="180"></el-table-column>
      <el-table-column prop="postRole" label="发布角色" width="180"></el-table-column>
      <el-table-column prop="postContent" label="帖子内容" width="180"></el-table-column>
      <el-table-column label="帖子图片" width="180">
        <template slot-scope="scope">
          <img
            v-if="scope.row.postPhoto"
            :src="scope.row.postPhoto"
            alt="Post Photo"
            class="post-photo"
          />
        </template>
      </el-table-column>
      <el-table-column prop="viewNum" label="浏览量" width="180"></el-table-column>
      <el-table-column prop="collectNum" label="收藏量" width="180"></el-table-column>
      <el-table-column prop="status" label="状态" width="180"></el-table-column>
      <el-table-column prop="postType" label="帖子类型" width="180"></el-table-column>
      <el-table-column prop="postTitle" label="帖子主题" width="180"></el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button
            type="primary"
            v-if="scope.row.status === '待审核'"
            @click="check(scope.row.postId,'已发布')"
          >通过</el-button>
          <el-button
            type="primary"
            v-if="scope.row.status === '未发布'"
            @click="check(scope.row.postId,'已发布')"
          >发布</el-button>
          <el-button
            type="primary"
            v-if="scope.row.status === '待审核'"
            @click="check(scope.row.postId,'已拒绝')"
          >拒绝</el-button>
          <el-button
            type="primary"
            v-if="scope.row.status === '已发布'"
            @click="check(scope.row.postId,'未发布')"
          >下架</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[4, 8, 10, 12]"
      :page-size="4"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 示例数据，实际应用中应从API获取
      posts: [],
      total: 0,
      currentPage: 1,
      pageSize: 4,
      searchTitle: ""
    };
  },
  methods: {
    feachData() {
      this.$axios
        .get("/post/getPost", {
          params: {
            postType: this.searchTitle,
            currpage: this.currentPage,
            pagesize: this.pageSize
          }
        })
        .then(res => {
          console.log(res);
          this.posts = res.data;
          this.total = res.total;
        })
        .catch(err => {
          console.log(err);
        });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.feachData();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.feachData();
    },
    check(postId, status) {
      this.$axios
        .get("/post/check", {
          params: {
            postId: postId,
            status: status
          }
        })
        .then(res => {
          console.log(res);
          if (res.code == 200) {
            this.$message.success(res.msg);
            this.feachData();
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  created() {
    this.feachData();
  }
};
</script>

<style>
.post-photo {
  width: 100px; /* 根据需要调整图片大小 */
  height: auto;
}
</style>
